<template>
  <!-- TOVC曲线 -->
  <view class="conter">
    <cc-date title='TOVC曲线' text='选择日期' color='#fff' frist="时均" second="日均" third="月均" fourth="自定义" @confirm="confirm_a"></cc-date>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_b" :class="{head_a:falg==0}" @click="cheang">
        厂界
      </view>
      <view class="head_b" :class="{head_a:falg==1}" @click="cheang_a">
        排口
      </view>
    </view>
    <uni-card class="unicard">
      <view class="chart">
        <view class="chart_a">
          <view class="head_word">
           <ms-dropdown-menu>
              <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view> 
          <view class="head_word">
           <ms-dropdown-menu>
              <ms-dropdown-item @input="mileage_a" v-model="value" :list="All_enterpriseList_a"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view>
        </view>
        <view class="change_v">
          <view class="change_vv">
          </view>
          厂界
          <view class="change_vc">
          </view>
          排口
        </view>
       <view class="region">
          <scroll-view scroll-x="true">
              <view class="scroll">
                <echarts :option="option" style="height: 600rpx;width:3000rpx;" @click="echartsClick"></echarts>
              </view>
          </scroll-view>
        </view>
      </view>
    </uni-card>
  </view>
</template>
<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        All_enterpriseList:[],
        enterprise_id:'', 
        All_enterpriseList_a:[],
        enterprise_a_id:'',
        date:'',
        choice:'',
        value: 0,
        falg: 0,
        option: {
          xAxis: {
            type: 'category',
            data: ['00:00', '01:00', '02:00', '03:00','04:00','05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              data: [720, 505, 232, 188, 505, 110, 505,510,720, 505, 232, 188, 505, 110, 505,510,720, 505, 232, 188, 505, 110, 505,510],
              type: 'line',
              smooth: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#5B8FF9' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5B8FF9' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              areaStyle: {}
            },
            {
              data: [590, 190, 212, 595, 200,212, 20, 190,590, 190, 212, 595, 200,212, 20, 190,590, 190, 212, 595, 200,212, 20, 190],
              type: 'line',
              smooth: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5AD8A6' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#5AD8A6' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#5AD8A6' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5AD8A6' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              areaStyle: {}
            }
          ]
        }
      }
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
       // 查询企业的总数和企业检测详情
      getAll_enterprise(){
      	this.$http.get('/device/group/customerId',{}).then(res=>{
          // console.log('企业信息')
          if(res.code=='00000'){
            // console.log('企业信息165')
            const list = []
            res.data.forEach((item,index)=>{
              list.push(
               { 
                text:item.abbreviation,
                id:item.id,
                value:index+1
                }
              )
            })
            list.unshift(
            {
             text:'选择企业',
             value:0
             }
            )
            this.All_enterpriseList = list
            this.All_enterpriseList_a = list
            console.log('企业信息',this.All_enterpriseList_a)
          }
      	})
      },  
      getEcharts(){
        this.$http.get('/envirnment-air/app/analysis/tvocTrend',{
          date:this.date,
          dateType:this.choice,
          type:this.falg,
          enterpriseId:this.enterprise_id +','+this.enterprise_a_id
        }).then(res=>{
          console.log('echartsList',res)
          if(res.code=='00000'){
          const echartsList = []
          const echartsList_a = []
          const echartsList_b = []
          res.data[0].datas.forEach((item,index)=>{
              echartsList.push(item.key) 
              echartsList_a.push(item.value) 
          }) 
          res.data[1].datas.forEach((item,index)=>{
              echartsList_b.push(item.value) 
          })
          this.option.xAxis.data = echartsList 
          this.option.series[0].data = echartsList_a
          this.option.series[1].data = echartsList_b
          this.$refs.update(this.option)
          // console.log('echartsList',echartsList)
          }
        })
      },
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
        if(this.enterprise_a_id){
           this.getEcharts()
        }
      },
      mileage_a(e) {
        this.enterprise_a_id = e.id
        console.log('enterprise_a_id',this.enterprise_a_id);
        if(this.enterprise_id){
           this.getEcharts()
        }
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        // console.log('fjowefjie',this.date ,this.choice)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
      },
      cheang_a() {
        this.falg = 1
      },
    }
  }
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .conter {
    width: 100%;
    height: 100vh;
    background: #F7F7F7;
  }

  .head {
    width: 702rpx;
    height: 66rpx;
    display: flex;
    margin: 20rpx auto;
  }

  .head_a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #4EA1FF !important;
    color: #fff;
    border-radius: 8rpx;
  }

  .head_b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: #fff;
    border-radius: 8rpx;
  }

  // .chart {
  //   overflow: hidden;
  //   width: 702rpx;
  //   height: 1339rpx;
  //   background-color: #fff;
  //   margin: 20rpx 0 0 24rpx;
  //   border-radius: 8px;
  // }

  .chart_a {
    display: flex;
    justify-content: space-around;
  }

  // .chart_aa {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   width: 144rpx;
  //   height: 56rpx;
  //   background: #FFFFFF;
  //   border-radius: 8px;
  //   margin: 10rpx 10rpx 0 0;
  //   // padding: 0 8rpx;
  //   border: 1px solid #EAEAEA;
  //   font-size: 24rpx;
  //   font-family: PingFang-SC-Medium, PingFang-SC;
  //   font-weight: 500;
  //   color: #333333;
  // }

  .chart_ab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;

    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .chart_ac {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;

    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .chart_ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 144rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #4EA1FF;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #4EA1FF;
  }
  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .change_v {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }
  
  .change_vv {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }
  .change_vc {
    width: 15rpx;
    height: 15rpx;
    margin: 0 16rpx 0 36rpx;
    background-color: #5AD7A6;
    border-radius: 50%;
  }
  .region{
    width: 100%;
    scroll-view{
      width: 100%;
    }
  }
  .scroll{
    width: 100%;
    transform: translate(-35%,-10%);
  }
  .unicard{
    // width: 704rpx !important;
    // margin: 20rpx auto !important;
  }
</style>
